<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" class="search-form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item>
            <el-select 
              v-model="queryParams.status" 
              placeholder="状态" 
              clearable 
              style="width: 100%"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-input
              v-model="queryParams.searchStr"
              placeholder="请输入员工姓名/手机号"
              clearable
              @keyup.enter="handleQuery"
            >
              <template #append>
                <el-button :icon="Search" @click="handleQuery" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" style="text-align: right">
          <el-button plain type="primary" @click="handleAdd">添加员工</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 表格区域 -->
    <el-table 
      v-loading="loading"
      :data="list"
      border
    >
      <el-table-column prop="companyUserName" label="员工" min-width="120" />
      <el-table-column prop="group" label="分组" min-width="180" />
      <el-table-column prop="account" label="账号" min-width="160" />
      <el-table-column prop="lookAllCheckInRecordsFlag" label="查看入住人" min-width="100" />
      <el-table-column prop="roleName" label="岗位" min-width="100" />
      <el-table-column label="操作" min-width="140">
        <template #default="scope">
          <el-space>
            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="handleRemove(scope.row, scope.$index)">删除</el-button>
            <el-dropdown @command="handleCommand">
              <el-button link type="primary">更多</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="key">钥匙管理</el-dropdown-item>
                  <el-dropdown-item command="password">密码管理</el-dropdown-item>
                  <el-dropdown-item command="card">卡管理</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
          
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        v-show="total > 0"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="val => { queryParams.pageSize = val; getList() }"
        @current-change="val => { queryParams.pageNum = val; getList() }"
      />
    </div>
  </div>
</template>
<script setup name="Staff">
import groupApi from '@/api/setting/group'
import StaffOperationDl from './component/staffOperationDl.vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { timePickerDefaultProps } from 'element-plus'

const { proxy } = getCurrentInstance()
const router = useRouter()

const groupOptions = ref([])
const list = ref([])
const loading = ref(false)
const total = ref(0)

const data = reactive({
  queryParams: {
    groupId: null,
    searchStr: null,
    pageNum: 1,
    pageSize: 10
  },
  staffOperration: {
    visible: false,
    type: 'add',
    form: {}
  }
})
const { queryParams, staffOperration } = toRefs(data)

/* 新增 */
function handleAdd() {
  staffOperration.value.type = 'add'
  staffOperration.value.visible = true
}
/* 编辑 */
function handleEdit(row) {
  console.log(row);
  staffOperration.value.type = 'edit'
  staffOperration.value.visible = true
  staffOperration.value.form = { ...row }
}
/* 删除 */
function handleRemove(row, index) {
  proxy.$modal.confirm('点击确认按钮将删除该员工，是否继续？').then(() => {
    list.value.splice(index, 1)
    proxy.$modal.msgSuccess("删除成功");})
  .catch(() => {});
}
/* 更多 */
function handleCommand(value) {
  switch (value) {
    case 'key':
      router.push('/staff/keyManage')
      break
    case 'password':
      router.push()
      break
    case 'card':
      router.push()
      break
    default:
      break
  }
}

/* 搜索 */
function handleQuery() {
  getList()
}

/* 员工弹窗操作 */
function handleStaffOperationOk(params) {
  console.log('ok:>>>', params);
  list.value.push({ ...params })
  total.value += 1
  staffOperration.value.visible = false
}
function handleStaffOperationCancel() {
  staffOperration.value.visible = false
}

/* 获取列表 */
function getList() {
  loading.value = timePickerDefaultProps
  setTimeout(() => {
    list.value = [{
      companyUserName: '林某某',
      account: '13799060779',
      groupList: [{
        branchId: 56581,
        name: "县城片区",
        telephone: "13799060779"
      }, {
        branchId: 56589,
        name: "积山片区",
        telephone: "13799060779"
      }],
      lookAllCheckInRecordsFlag: 1,
      roleName: '管理员',
      roleId: 23123,
      group: '县城片区, 积山片区',
    }]
    
    loading.value = false
  }, 500);
}

// 获取分组列表
function getGroupList() {
  groupApi.getList().then(res => {
    groupOptions.value = res.rows.map(item => ({
      label: item.groupName,
      value: item.groupId
    }))
    queryParams.value.groupId = groupOptions.value[0].value
  })
}
getGroupList()
</script>
